<template>
  <div class="default-main">
    <el-row :gutter="10">
      <!-- 告警策略管理 -->
      <el-col class="xs-mb-20" :xs="24" :sm="24" :md="24" :lg="10">
        <el-card shadow="always" header="告警策略">
          <Rule @on-show-dict-list="showList" />
        </el-card>
      </el-col>
      <!-- 策略指标项列表 -->
      <el-col class="xs-mb-20" :xs="24" :sm="24" :md="24" :lg="14">
        <el-card shadow="always" header="策略指标项详情">
          <template #header>
            <div class="card-header">
              <span>{{ state.row.dictName }}指标项</span>
              <el-button
                v-if="state.itemList"
                v-blur
                @click="onAction"
                class="table-header-operate"
                type="primary"
              >
                <el-icon>
                  <Plus />
                </el-icon>
                <span class="table-header-operate-text">添加</span>
              </el-button>
            </div>
          </template>
          <Item v-if="state.itemList" @on-put="openPut" />
          <div v-else>请选择某一策略数据</div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 编辑指标项表单 -->
    <popupForm v-model="state.showEditForm" />
    <!-- 新增指标项表单 -->
    <EditpopupForm v-model="state.showAddForm" />
  </div>
</template>
<script lang="ts" setup>
import { reactive, provide } from "vue";
import Rule from "./components/rule.vue";
import Item from "./components/item.vue";
import { DictOperation } from "@/utils/common";
import popupForm from "./components/popupForm.vue";
import EditpopupForm from "./components/addItemForm.vue";
import useCurrentInstance from "@/utils/useCurrentInstance";
import { useWarningItem } from "@/store/backend/Warning/item";
import { useWarningItemObject } from "@/store/backend/Warning/itemObject";
import { useWarningCategory } from "@/store/backend/Warning/category";
import { useWarningNoticeConfig } from "@/store/backend/Warning/noticeConfig";
import { useWarningRule } from "@/store/backend/Warning/rule";

const warnItem = useWarningItem();
const itemObject = useWarningItemObject();
const category = useWarningCategory();
const noticeConfig = useWarningNoticeConfig();
const rule = useWarningRule();
const { proxy } = useCurrentInstance(); //mitt
//初始化字典处理类
const dictOperation = new DictOperation();

const state: {
  itemList: boolean;
  row: anyObj;
  showAddForm: boolean;
  showEditForm: boolean;
} = reactive({
  itemList: false,
  row: {},
  showAddForm: false,
  showEditForm: false,
});

//策略数据点击编辑获取指标项
const showList = (row: any) => {
  state.itemList = true;
  state.row = row;
  console.log("策略数据点击编辑获取指标项", row);
};

//打开编辑指标项表单
const openPut = (data: any) => {
  state.showEditForm = true;
  proxy.eventBus.emit("editWarnItem", data);
};
//打开添加指标项表单
const onAction = () => {
  proxy.eventBus.emit("addWarnItem", {
    ruleId: state.row.id,
    ruleName: state.row.name,
  });
  state.showAddForm = true;
};

//获取字典
const getDictionary = () => {
  //获取策略类型的字典
  dictOperation.getDictionary(rule, "sys_rule_type", "type", "typeType");
  //获取策略启用的字典
  dictOperation.getDictionary(rule, "sys_warningrule_flag", "flag", "typeFlag");
  //获取是否开启远程控制的字典
  dictOperation.getDictionary(
    rule,
    "sys_warningrule_remotecontrol",
    "remoteControl",
    "typeControl"
  );
  //获取告警通知类型的字典
  dictOperation.getDictionary(
    noticeConfig,
    "sys_warningnotice_type",
    "noticeType",
    "type"
  );
  //获取告警通知方式的字典
  dictOperation.getDictionary(
    noticeConfig,
    "sys_warningnotice_way",
    "noticeWay",
    "typeWay"
  );
};
getDictionary();

provide("warnItem", warnItem);
provide("itemObject", itemObject);
provide("category", category);
provide("dictOperation", dictOperation);
provide("noticeConfig", noticeConfig);
</script>
<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 1200px) {
  .xs-mb-20 {
    margin-bottom: 20px;
  }
}
</style>
i
